<template>
    <header>
        <p>{{ route.name }}</p>
    </header>
    <div v-if="user.loginUser && user.loginUser.id>0">
        <!-- 订单列表部分 -->
        <h3>未支付订单信息：</h3>
        <template v-for="order in ordersList_unpay">
            <OrderItem :isNeedPaied="true" :isPaymentPage="false" :id="order.id"/>
        </template>
        <h3>已支付订单信息：</h3>
        <template v-for="order in orderList_pay">
            <OrderItem :isNeedPaied="false" :isPaymentPage="false" :id="order.id"/>
        </template>
    </div>
    <div v-else style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
        <el-button
                type="primary"
                @click="$router.push('/user/login')">请先登录
        </el-button>
    </div>

    <MyFooter/>
</template>

<script setup lang="ts">
import MyFooter from "../components/Footer.vue";
import {useRoute} from "vue-router";
import {ref, onMounted} from "vue";
import {OrderVO} from "../type/order";
import {list} from "../service/order.ts";
import OrderItem from "../components/OrderItem.vue";
import {userStore} from "../store/user.ts";
import router from "../router";

const user = userStore()
const route = useRoute()
const ordersList_unpay = ref<OrderVO[]>([])
const orderList_pay = ref<OrderVO[]>([])

onMounted(async () => {
    if (user.loginUser && user.loginUser.id>0){
        const res = await list()
        ordersList_unpay.value = res.data.filter(item => item.orderState == 0)
        orderList_pay.value = res.data.filter(item => item.orderState != 0)
    }
})

</script>

<style scoped>
h3 {
    margin-top: 12vw;
    box-sizing: border-box;
    padding: 4vw;
    font-size: 4vw;
    font-weight: 300;
    color: #999;
    margin-bottom: 0;
}

header {
    width: 100%;
    height: 12vw;
    background-color: #0097FF;
    color: #fff;
    font-size: 4.8vw;

    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;

    display: flex;
    justify-content: center;
    align-items: center;
}


</style>
